<script lang="ts">
  import { tweened } from "svelte/motion";
  import { cubicInOut } from "svelte/easing";

  const uuid = Math.floor(Math.random() * 1000000);
  export let label: string = "";
  export let value: number = 0;
  export let unit: string = "";
  export let total: number = 100;
  export let type: "blue" | "yellow" | "text" = "blue";
  export let barOffset: number = 60;
  const barWidth = 80;
  const innerValue = tweened(0, {
    duration: 2000,
    easing: cubicInOut,
  });
  $: innerValue.set(value || 0);
</script>

<div class="w-full">
  {#if type !== "text"}
    <svg width="100%" height="100%" viewBox="0 0 200 16">
      <defs>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          x1="0"
          y1="10"
          x2="200"
          y2="10"
          id="gradient-${uuid}"
        >
          {#if type === "blue"}
            <stop offset="0" style="stop-color: #0799F4" />
            <stop offset="1" style="stop-color: #19F7FF" />
          {:else if type === "yellow"}
            <stop offset="0" style="stop-color: #E4951E" />
            <stop offset="1" style="stop-color: #F8CB41" />
          {/if}
        </linearGradient>
      </defs>
      <text
        style="font-size: 12px;"
        fill="#fff"
        opacity="0.8"
        x="20"
        y="10"
        dominant-baseline="central">{label}：</text
      >
      <path
        fill="url(#gradient-${uuid})"
        d="M {barOffset} 5
          H {($innerValue / total) * barWidth + barOffset}
          A 5 5 0 0 1 {($innerValue / total) * barWidth + barOffset + 4} 10
          V 10
          A 5 5 0 0 1 {($innerValue / total) * barWidth + barOffset} 15
          H {barOffset}
          V 5 Z"
      />
      <text
        style="font-size: 12px;"
        fill="#fff"
        x={($innerValue / total) * barWidth + barOffset + 20}
        y="10"
        dominant-baseline="central">{Math.ceil($innerValue)}{unit}</text
      >
    </svg>
  {:else}
    <svg width="100%" height="100%" viewBox="0 0 200 20">
      <text
        style="font-size: 12px;"
        fill="#fff"
        opacity="0.8"
        x="20"
        y="10"
        dominant-baseline="central">{label}：</text
      >
      <text
        style="font-size: 12px;"
        fill="#0BAFF7"
        x={barOffset}
        y="10"
        dominant-baseline="central">{Math.ceil($innerValue)}{unit}</text
      >
    </svg>
  {/if}
</div>

<style>
  .rect.blue {
    background: linear-gradient(67.71deg, #e4951e 8.58%, #f8cb41 91.42%);
  }

  .rect.yellow {
    background: linear-gradient(73.93deg, #0799f4 7.96%, #19f7ff 92.04%);
  }
</style>
